import React, { Component } from 'react'
import './index.scss'

export default class MyFooter extends Component {
    state = {
        total: 0,
        count: 0
    }

    componentDidMount () {
        this.getTotal()
    }

    getTotal = () => {
        const total = this.props.arr
            .filter((item) => item.goods_state)
            .reduce((prev, item) => prev + item.goods_price * item.goods_count, 0)

        console.log(total);
        this.setState({
            total
        })
    }

    getAllCheck = (flag) => {
        this.props.all(flag)
    }

    render () {
        const { total } = this.state
        return (
            <div className="my-footer">
                <div className="custom-control custom-checkbox">
                    <input
                        type="checkbox" className="custom-control-input" id="footerCheck" checked={this.props.allCheck} onChange={(e) => this.getAllCheck(e.target.checked)} />
                    <label className="custom-control-label" htmlFor="footerCheck">全选</label>
                </div>
                <div>
                    <span>合计:</span>
                    <span className="price">¥{total}</span>
                </div>
                <button type="button" className="footer-btn btn btn-primary">结算</button>
            </div>
        )
    }
}
